<template>
  <el-dialog v-model="openBoole" :close-on-click-modal="false" custom-class="mydialog" width="30%" :title="title"
    @close="close">
    <el-form ref="openRef" :model="openForm" :rules="rules" label-width="110px" size="small">
      <el-form-item label="联系人姓名" prop="linkmanName">
        <el-input v-model="openForm.linkmanName" clearable placeholder="请输入联系人姓名" />
      </el-form-item>
      <el-form-item label="联系电话" prop="tel">
        <el-input v-model="openForm.tel" clearable placeholder="请输入联系电话" />
      </el-form-item>
      <el-form-item label="职位" prop="linkmanPost">
        <el-input v-model="openForm.linkmanPost" clearable placeholder="请输入职位" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer" style="display:flex;justify-content:center;align-items:center;">
        <el-button class="border-btn" size="small" style="margin-right: 20px;" @click="close">取消</el-button>
        <el-button v-if="title === '新建联系人'" class="border-btn" size="small" style="margin-right: 20px;"
          @click="handlSave">保存并新建</el-button>
        <el-button class="main-btn" size="small" type="primary" @click="handlSubmit">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { getCurrentInstance, inject, reactive, ref, toRefs } from "vue";
import { useRoute } from "vue-router";
import { validateVETel } from "@/utils/validate";

export default {
  name: "AddContact",
  props: {
    title: {
      type: String,
      default: () => {
        return "新建联系人";
      },
    },
  },
  setup(props, context) {
    const validateTel = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else {
        if (validateVETel(value)) {
          callback(new Error("手机号格式不正确"));
        } else {
          callback();
        }
      }
    };
    const route = useRoute();
    const currentInstance = getCurrentInstance();
    const api = inject("api");
    var data = reactive({
      openForm: {
        relationId: Number(route.query.id),
        modelType: "",
        linkmanName: "", // 联系人姓名
        linkmanPost: "", //  联系人职位
        tel: "", // 联系人电话
      },
      openBoole: false,
      openRef: null,
      rules: {
        tel: [{ required: true, validator: validateTel, trigger: "blur" }],
        linkmanName: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
        ],
        linkmanPost: [
          { required: true, message: "请输入联系人职位", trigger: "blur" },
        ],
      },
    });
    const close = () => {
      data.openBoole = false;
      remove();
    };

    const remove = () => {
      data.openRef.clearValidate();
      data.openRef.resetFields();
    };

    const open = (val, value) => {
      data.openBoole = true;
      data.openForm.modelType = value;
      if (val) {
        console.log(val, "----");
        for (const key in data.openForm) {
          data.openForm[key] = val[key];
        }
        data.openForm.id = val.id;
      }
    };

    const handlSave = () => {
      data.openRef.validate((valid) => {
        if (valid) {
          api.terminal.CONTACT_CREATE(data.openForm).then((res) => {
            if (res.code === 0) {
              currentInstance.proxy.customMessage({
                type: "success",
                message: "创建成功",
              });
              context.emit("succsess");
              remove();
            } else {
              currentInstance.proxy.customMessage({
                type: "error",
                message: res.msg,
              });
            }
          });
        }
      });
    };

    const handlSubmit = () => {
      data.openRef.validate((valid) => {
        if (valid) {
          const commit = ref(undefined);
          const msgs = ref("");
          if (data.openForm.id) {
            commit.value = api.terminal.CONTACT_UPDATE;
            msgs.value = "修改成功";
          } else {
            commit.value = api.terminal.CONTACT_CREATE;
            msgs.value = "创建成功";
          }
          commit.value(data.openForm).then((res) => {
            if (res.code === 0) {
              currentInstance.proxy.customMessage({
                type: "success",
                message: msgs.value,
              });
              context.emit("succsess");
              close();
            } else {
              currentInstance.proxy.customMessage({
                type: "error",
                message: res.msg,
              });
            }
          });
        }
      });
    };

    return {
      ...toRefs(data),
      close,
      remove,
      open,
      handlSave,
      handlSubmit,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
